﻿@page "/menu-bar/api"

@using Syncfusion.Blazor.Navigations
@using Syncfusion.Blazor.DropDowns
@using Syncfusion.Blazor.Buttons
@inherits SampleBaseComponent

<SampleDescription>
    <p>  This sample demonstrates the customization of Menu component by using its properties from the property pane. Select any combination of properties from the property pane to customize Menu component.</p>
</SampleDescription>
<ActionDescription>
    <p>In this demo, default <code>Menu</code> is rendered with minimal configuration.</p>
    <p>This sample can be customized further with the combination of <code>Menu</code> properties from the property pane. For example,</p>
    <ul>
        <li>You can switch to <b>Vertical</b> and <b>Horizontal</b> mode by clicking and selecting the <b>Orientation</b> mode from <i>Orientation</i> dropdownlist.</li>
        <li>You can enable or disable menu items by clicking and selecting the item from <i>Enable / Disable item</i> dropdownlist.</li>
        <li>You can also enable the show menu item on mouse click <b>ShowItemOnClick</b> property by checking the <i>Show Item On Click</i> checkbox.</li>
    </ul>
    <p>More information about Blazor Menu component can be found in this <a target="_blank" href="https://blazor.syncfusion.com/documentation/menu-bar/getting-started/">documentation section</a>.</p>
</ActionDescription>

<div class="control-section">
    <div class="col-lg-8 control-section">
        <div class="menu-control">
            <SfMenu @ref="menu" TValue="MenuItem" Orientation="@mode" ShowItemOnClick="@menuItemClick">
                <MenuItems>
                    <MenuItem Text="Events">
                        <MenuItems>
                            <MenuItem Text="Conferences"></MenuItem>
                            <MenuItem Text="Music"></MenuItem>
                            <MenuItem Text="Workshops"></MenuItem>
                        </MenuItems>
                    </MenuItem>
                    <MenuItem Text="Movies">
                        <MenuItems>
                            <MenuItem Text="Now Showing"></MenuItem>
                            <MenuItem Text="Coming Soon"></MenuItem>
                        </MenuItems>
                    </MenuItem>
                    <MenuItem Text="Directory">
                        <MenuItems>
                            <MenuItem Text="Media Gallery"></MenuItem>
                            <MenuItem Text="Newsletters"></MenuItem>
                        </MenuItems>
                    </MenuItem>
                    <MenuItem Text="Queries">
                        <MenuItems>
                            <MenuItem Text="Our Policy"></MenuItem>
                            <MenuItem Text="Site Map"></MenuItem>
                            <MenuItem Text="24x7 Support"></MenuItem>
                        </MenuItems>
                    </MenuItem>
                    <MenuItem Text="Services"></MenuItem>
                </MenuItems>
            </SfMenu>
        </div>
    </div>
    <div class="col-lg-4 property-section">
        <table id="property" title="Properties" style="width: 100%">
            <tbody>
                <tr>
                    <td style="width: 50%;padding-top:10px">
                        <div>Orientation</div>
                    </td>
                    <td style="width: 50%;padding-top:10px">
                        <div style="max-width: 200px">
                            <SfDropDownList DataSource="@dropDownListData" PopupHeight="200px" @bind-Value="horizontal" TValue="string" TItem="DataModel">
                                <DropDownListEvents TValue="string" TItem="DataModel" ValueChange="@change"></DropDownListEvents>
                                <DropDownListFieldSettings Value="Text" Text="Text"></DropDownListFieldSettings>
                            </SfDropDownList>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td style="width: 50%;padding-top:10px">
                        <div>Enable / Disable item</div>
                    </td>
                    <td style="width: 50%;padding-top:10px">
                        <div style="max-width: 200px">
                            <SfMultiSelect DataSource="@headerData" PopupHeight="200px" Width="160px" Mode="Syncfusion.Blazor.DropDowns.VisualMode.CheckBox" ShowDropDownIcon="true" TValue="string[]" TItem="DataModel">
                                <MultiSelectEvents ValueChange="enableDisableChange" TValue="string[]" TItem="DataModel"></MultiSelectEvents>
                                <MultiSelectFieldSettings Value="Text" Text="Text"></MultiSelectFieldSettings>
                            </SfMultiSelect>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td style="width: 50%;padding-top:15px">
                        <div>Show Item on Click</div>
                    </td>
                    <td style="width: 50%;padding-top:15px">
                        <SfCheckBox ValueChange="@checkboxChange" @bind-Checked="showButtonChange" TChecked="bool"> </SfCheckBox>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

@code {
    private SfMenu<MenuItem> menu;
    private List<string> items = new List<string>() { "Events", "Movies", "Directory", "Queries", "Services" };
    private string horizontal = "Horizontal";
    private Orientation mode = Orientation.Horizontal;
    private bool menuItemClick;
    private bool showButtonChange;

    private void change(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, DataModel> args)
    {
        mode = args.Value == "Vertical" ? Orientation.Vertical : Orientation.Horizontal;
    }

    @*Hidden:Lines*@
    #pragma warning disable
    @*End:Hidden*@
    private void enableDisableChange(Syncfusion.Blazor.DropDowns.MultiSelectChangeEventArgs<string[]> args)
    {
        if (args.Value != null)
        {
            menu.EnableItems(items, true);
            menu.EnableItems(args.Value.ToList(), false);
        }
        else
        {
            menu.EnableItems(items, true);
        }
    }
    
    @*Hidden:Lines*@
    #pragma warning restore
    @*End:Hidden*@

    private void checkboxChange(Syncfusion.Blazor.Buttons.ChangeEventArgs<bool> args)
    {
        this.menuItemClick = args.Checked;
    }
    private List<DataModel> headerData = new List<DataModel>()
    {
        new DataModel { Text = "Events" },
        new DataModel { Text = "Movies" },
        new DataModel { Text = "Directory" },
        new DataModel { Text = "Queries" },
        new DataModel { Text = "Services" }
    };
    private List<DataModel> dropDownListData = new List<DataModel>()
    {
        new DataModel { Text = "Horizontal" },
        new DataModel { Text = "Vertical" }
    };
    public class DataModel
    {
        public string Text { get; set; }
        public List<DataModel> SubItems { get; set; }
        public bool Disabled { get; set; }
    }
}

<style>
    .menu-control {
        margin: 45px auto 0;
        text-align: center;
    }
</style>
